<template>
  <div>
    <div class="card" style="margin-bottom:18px ">
      <el-input v-model="data.name" style="width: 280px;margin-right: 10px" placeholder="请输入获奖名称查询" :prefix-icon="Search"/>
      <el-input v-model="data.rewardCategory" style="width: 280px;margin-right: 10px" placeholder="请输入获奖类别查询" :prefix-icon="Search"/>
      <el-button type="primary" round style="margin-left: 10px"  @Click="load">查询</el-button>
    </div>
  </div>
  <div class="card " style="margin-bottom:18px;">
    <div>
      <el-button v-if="user.role === 'STUDENT'" type="primary" round @click="handeladd">新增</el-button>
    </div>
    <div>
      <el-table :data="data.tableData" style="width: 100%">
        <el-table-column prop="id" label="id" width="70" />
        <el-table-column prop="name" label="获奖名称"  />
        <el-table-column prop="level" label="级别" />
        <el-table-column prop="dept" label="授予部门"  />
        <el-table-column prop="rewardLevel" label="获奖等级" />
        <el-table-column prop="rewardCategory" label="获奖类别"/>
        <el-table-column prop="rewardList" label="获奖人名单"/>
        <el-table-column prop="rewardDate" label="授予日期"/>
        <el-table-column prop="materials" label="申报材料"/>
        <el-table-column prop="cartUrl" label="证书链接"/>
        <el-table-column prop="declarationDate" label="填报日期"/>
        <el-table-column prop="state" label="审核状态"/>
        <el-table-column prop="reason" label="失败原因"/>
        <el-table-column prop="createTime" label="创建时间"/>
        <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button type="primary" v-if="scope.row.state != '成功'" @click="update(scope.row)">修改</el-button>
          <el-button type="remove" @click="del(scope.row)">删除</el-button>
        </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <div class="card">
    <el-pagination v-model:page-size="data.pageSize" v-model:current-page="data.pageNum"
                   @current-change="handelCurrentChange"
                   background layout="prev, pager, next" :total="data.total" />
  </div>
  <el-dialog  width="35%" v-model="data.formVisible" title="学生信息" destroy-on-close>
    <el-form :model="data.form" :rules="rules" ref="formRef" label-width="100px" label-position="right" style="padding-right: 40px" >
      <el-form-item  prop="name" label="获奖名称" >
        <el-input v-model="data.form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="level" label="级别" >
        <el-input v-model="data.form.level" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="dept" label="授予部门">
        <el-input v-model="data.form.dept" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="rewardLevel" label="获奖等级" >
        <el-input v-model="data.form.rewardLevel" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="rewardCategory" label="获奖类别" >
        <el-input v-model="data.form.rewardCategory" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="rewardList" label="获奖人名单" >
        <el-input v-model="data.form.rewardList" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="materials" label="申报材料" >
        <el-input v-model="data.form.materials" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="cartUrl" label="证书链接" >
        <el-input v-model="data.form.cartUrl" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="data.formVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import {reactive, ref} from "vue";
import { Search } from '@element-plus/icons-vue'
import request from "@/utils/request";
import {ElMessage, ElMessageBox} from "element-plus";
const user = JSON.parse(localStorage.getItem('student-user')||'{}')
const  data =reactive({
  name:"",
  no:"",
  teacher:"",
  total:0,
  tableData:[],
  pageNum: 1,//当前页数
  pageSize:5,//每一页的个数
  student :JSON.parse(localStorage.getItem('student-user')||'{}'),
  formVisible:false,
  form:{}
})
const load=() =>{
  request.get("/scientific/selectPage",{
    params:{
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      name: data.name,
      rewardCategory: data.rewardCategory,
      createTime:data.createTime,
      stuId: user.role === 'STUDENT' ? user.id : null  // 如果是学生角色，只查询当前学生的数据
    }
  }).then(res=>{
    data.tableData = res.data?.list || []
    data.tableData.forEach(item=>{
      item.state = item.state === 0 ? "未审核" : item.state === 1 ? "成功" : "失败"
    })
    data.total = res.data.total || 0
  })
}
//调用方法获取数据
load();
const handelCurrentChange = () => {
  //翻页后重新加载数据页面
  load()
}
const reset =()=>{
  data.name = ""
  data.no = ""
  data.teacher = ""
  load()
}
const handeladd =()=>{
  data.form= { }
  data.formVisible=true
}
const update=(row)=>{
  request.get('/scientific/detail/'+row.id).then(res=>{
  if (res.code === '200'){
    data.form= {...res.data }
    data.formVisible=true
  }else
  {
    ElMessage.error(res.msg)
  }
  })
}
const del=(row)=>{
  ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    request.delete('/scientific/delete/'+row.id).then(res=>{
      if (res.code === '200'){
        ElMessage.success("操作成功")
        load()
      }else{
        ElMessage.error(res.msg)
      }
    })
  })
}
const formRef = ref()
//保存数据到后台
const save =()=>{
  formRef.value.validate((valid) => {
    if(valid){
      request.request( {
        url:data.form.id ?  '/scientific/update': '/scientific/add',
        method:data.form.id ? 'PUT' : 'POST',
        data:data.form
      }).then(res => {
        if (res.code ==='200'){
          load()
          data.formVisible = false //弹窗关闭
          ElMessage.success("操作成功")
        }else{
          ElMessage.error(res.msg)
        }
      })
    }
  })
}
</script>
<style scoped>
.search-bar {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
}

.search-input {
  width: 280px;
  margin-right: 10px;
}

.action-buttons {
  margin-bottom: 18px;
}

.data-table {
  margin-bottom: 18px;
}

.pagination {
  margin-bottom: 18px;
}
.el-button--primary {
  --el-button-text-color: var(--el-color-white);
  --el-button-bg-color: #333;
  --el-button-border-color: var(--el-color-primary);
  --el-button-outline-color: var(--el-color-primary-light-5);
  --el-button-active-color: var(--el-color-primary-dark-2);
  --el-button-hover-text-color: var(--el-color-white);
  --el-button-hover-link-text-color: var(--el-color-primary-light-5);
  --el-button-hover-bg-color: var(--el-color-primary-light-3);
  --el-button-hover-border-color: var(--el-color-primary-light-3);
  --el-button-active-bg-color: var(--el-color-primary-dark-2);
  --el-button-active-border-color: var(--el-color-primary-dark-2);
  --el-button-disabled-text-color: var(--el-color-white);
  --el-button-disabled-bg-color: var(--el-color-primary-light-5);
  --el-button-disabled-border-color: var(--el-color-primary-light-5);
}
.el-pagination.is-background .btn-prev.is-active, .el-pagination.is-background .btn-next.is-active, .el-pagination.is-background .el-pager li.is-active {
  background-color: #333;
  color: var(--el-color-white);
}
.el-button--primary {
  --el-button-text-color: var(--el-color-white);
  --el-button-bg-color: #24527a;
  --el-button-border-color: var(--el-color-primary);
  --el-button-outline-color: var(--el-color-primary-light-5);
  --el-button-active-color: var(--el-color-primary-dark-2);
  --el-button-hover-text-color: var(--el-color-white);
  --el-button-hover-link-text-color: var(--el-color-primary-light-5);
  --el-button-hover-bg-color: var(--el-color-primary-light-3);
  --el-button-hover-border-color: var(--el-color-primary-light-3);
  --el-button-active-bg-color: var(--el-color-primary-dark-2);
  --el-button-active-border-color: var(--el-color-primary-dark-2);
  --el-button-disabled-text-color: var(--el-color-white);
  --el-button-disabled-bg-color: var(--el-color-primary-light-5);
  --el-button-disabled-border-color: var(--el-color-primary-light-5);
}
.el-button--primary {
  --el-button-text-color: var(--el-color-white);
  --el-button-bg-color: #24527a;
  --el-button-border-color: #214360;
  --el-button-outline-color: #e7f6f3;
  --el-button-active-color: var(--el-color-primary-dark-2);
  --el-button-hover-text-color: var(--el-color-white);
  --el-button-hover-link-text-color: #e7f6f3;
  --el-button-hover-bg-color: #f9b44c;
  --el-button-hover-border-color: #88d4c1;
  --el-button-active-bg-color: #e7f6f3;
  --el-button-active-border-color: #f9b44c;
  --el-button-disabled-text-color: var(--el-color-white);
  --el-button-disabled-bg-color: #f9b44c;
  --el-button-disabled-border-color: #f9b44c;
}
::-webkit-validation-bubble-arrow-clipper[data-v-cf8a8c64] .el-pagination.is-background .el-pager li.is-active {
  background-color: #24527a;
  color: var(--el-color-white);
}
</style>
